Fork me on GitHub

Hexo 博客采用 gitee 作为图床并自动化提交文章的实现思路

发表于 | 分类于 | |

选择新的图床

在七牛不提供服务之后的一段时间我都是用新浪微博作为图床，配置谷歌浏览器的扩展工具非常好用，但是前段时间新浪开启了防盗链，所以我后面写的文章里的图片也看不了了。可供选择的免费图床有SM.MS、路过图床，但免费的终究是不稳定。其次付费的对象存储有阿里云和腾讯云可选，但是目前我的需求只是博客使用，去购买图床有点浪费了。本想干脆建一个 GitHub 仓库作为图床吧，并且可以配合图床工具 PicGo 使用，很方便。但是图床的目的本就是为了加快上传和访问速度，所以最后决定使用码云仓库作为图床。

具体做法是：

  1. 在 gitee 中新建仓库命名为 images
  2. 本地准备好文件后推送到仓库中
  3. 获取仓库中的图片链接，替换本地编写的博客中的图片引用

自动化博客流程

原来我写一篇博客并发布需要将本地图片统一上传到图床中，然后再复制图片引用链接到博客内容中，最后通过 hexo 命令来发布。这样写一篇博客有很多复制粘贴和敲命令的过程，并不高效。后来我想到，我完全可以把复制和敲命令的工作都写到一份脚本中，最后我写完博客只要敲一行命令即可。最终博客发布的简单自动化流程如下：

  • 定义文件目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    |-- Hexo
    	|-- article # 本地编写的文章目录
    		|-- images # 图片目录
    			|-- img1.jpg
    			|-- img2.jpg
    			...
    		|-- 文章1.md
    		|-- 文章2.md
    		...
    	|-- source
    		|-- _posts # Hexo 的博客文件目录

    images 目录通过 git 上传到 gitee 仓库中作为图床，article 存放本地编辑的博客文章，之后通过脚本替换链接后在 _post目录中。

  • 编写 markdown 时使用相对路径引用图片

    ![MapReduce](./images/大数据系列 04 MapReduce 编程模型原理/MapReduce 题图.jpg)

    相对路径的好处是，我的本地文件在另外的电脑上的 OneDrive 查看时没有问题，并且方便找到图片位置。

  • 替换链接

    目的是将 article 文件夹下刚编辑完成的博客文章中的图片替换未 gitee 图床仓库中的链接。这里我用简单的 python 脚本实现内容替换。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    #!/usr/bin/env python
    # -*- coding: utf-8 -*-
    # @File  : change_links.py
    # @Author: Skye
    # @Date  : 2019/5/13
    # @Desc  : 将 md 文件中的相对路径替换为图床的路径，并保存
    import sys
    # 读取编写的文章文件名
    file_name = sys.argv[1]
    link_head = 'https://gitee.com/skyexu/images/raw/master'
    # 图片存放目录（需要替换）
    replace_str = '/images/'
    # 文章存放目录
    article_dir = './article/'
    # 输出目录
    out_dir = './source/_posts/'
    article_name = file_name[file_name.rfind('/') + 1:]
    content_online = list()
    with open(file_name, 'r', encoding="utf-8") as f:
        for line in f.readlines():
            if "![" in line :
                # 找到 "![" 的位置
                index1 = line.find("![")
                # 找到 "]" 的位置
                index2 = line.find("]", index1)
                # 找到 replace_str 的位置
                index3 = line.find(replace_str)
                # 去除 / 前面的原有链接，添加新链接
                content_online.append(line[:index2+2] + link_head + line[index3:])
            else:
                content_online.append(line)
    # 保存 markdown 文件到 Hexo 的 source/_posts 文件夹
    with open(out_dir+article_name, 'w', encoding="utf-8") as f:
        f.writelines(content_online)
    print('out posts file', out_dir+article_name)

    然后在命令行中运行即可

    1
    2
    3
    Skye@Skye-PC MINGW64 /d/OneDrive/Documents/Blog/Hexo
    $ python change_links.py ./article/bigdata-4\ mapreduce\ model\ .md
    out posts file ./source/_posts/bigdata-4 mapreduce model .md

  • 自动化上传图片和提交博客

    编辑好博客之后，要做的步骤有：

    1. git push 图片文件到远程仓库
    2. hexo g -d 提交博客

    将以上两个步骤也写到 python 脚本中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 执行提交图片到远程仓库操作
    cmd_image = 'cd article/images/ && git add --all && git commit -m "update image" && git push origin master'
    result = os.system(cmd_image)
    print(result)
    # 发布 Hexo 博客
    cmd_hexo = 'hexo g -d'
    result2 = os.system(cmd_hexo)
    print(result2)

通过上面的步骤即可实现编辑博客后的自动提交，现在我只要通过相对路径引用本地图片，然后通过控制台执行一条 python 代码即可。

1
2
Skye@Skye-PC MINGW64 ~/OneDrive/Documents/Blog/Hexo
$ python autoblog.py ./article/bigdata-4.md

总结

博客的这个问题折腾了好久，其实最简单的方案还是直接把图片放到静态网站的仓库中直接提交。然而，仓库毕竟有容量限制，我目前的方案将图片和静态网站代码分开存放，图片仓库容量满了之后再新建一个仓库即可，并且实现了简单的自动化提交流程，整体还是比较满意的。最后我将 Github Pages 迁移到了 Conding Pages，在国内的访问也快多了。

------------- The endThanks for reading-------------